<!-- eslint-disable vue/multi-word-component-names -->
<template>

  <div class="login">

    <div class="mui-content">

      <form class="mui-input-group">

        <div class="mui-input-row">

          <label>账号</label>

          <input v-model="loginForm.username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">

        </div>

        <div class="mui-input-row">

          <label>密码</label>

          <input v-model="loginForm.password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">

        </div>

      </form>

      <div class="mui-content-padded">

        <button @click="login" type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>

        <div class="link-area"><a @click="register">还没有账号？前往注册</a></div>

      </div>

    </div>

  </div>

</template>
  <script>

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    }

  },

  methods: {
    login () {

if (this.loginForm.username === '' || this.loginForm.password === ''){

  this.$toast('账号或密码不能为空')

} else {

  this.$http.post('login', this.loginForm).then(res => {

    if (res.data.code === 0) {

      this.$toast(res.data.msg)

    } else {

      // 登录成功

this.$store.commit('user/setUser', res.data.data)
this.$auth.setAuthorization(res.data.data.session_id)
this.$toast(res.data.msg)

this.$router.replace({ name: 'user' })

    }

  }).catch(() => {

    this.$toast('登录失败')

  })

}

},
    
    register () {

      this.$router.push({ name: 'register' })

    }

  }

}

</script>
<style lang="scss" scoped>

.mui-input-group {

  margin-top: 10px;

  background-color: transparent;

}

.mui-input-group label {

  width: 22%;

}

.mui-input-row:last-child {

  background: #fff;

}

.mui-input-row {

  margin-top: 20px;

  background: #fff;

}

.mui-input-row label~input,

.mui-input-row label~select,

.mui-input-row label~textarea {

  width: 78%;

}

.link-area {

  display: block;

  margin-top: 25px;

  text-align: center;

}

.mui-content-padded {

  margin-top: 30px;

}

</style>